<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插入和替换元素操作</title>
		<!-- 插入和替换元素操作:针对元素增删改操作
		append（）              功能：在匹配元素集合中所有元素的内部末尾插入内容
		 prepend（）            功能：在匹配元素集合中所有元素的内部开头插入内容
		 
		 after（）                   功能：在匹配元素集合中所有元素的后面插入内容
		 before（）                功能：在匹配元素集合中所有元素的前面插入内容
		 
		 remove（）              功能：移除元素集合中所有的元素和子元素【盒子模型都删掉】
		 empty（）                功能：清空匹配元素集合中所有的元素的内容【盒子模型不删除】
		 
		 replaceWith（）
		 -->
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
		button{
			padding: 10px 15px;
			margin: 5px;
			cursor: pointer;
		}
		body{
			margin: 20px;
		}
		#target{
			border: 5px solid #58ffff;
			padding: 10px;
			margin: 10px;
			border-radius: 5px;
		}
		</style>
	</head>
	<body>
		<!-- html：7个按钮   div包扩p包含：目标元素的初始段落      id=“target”；
		                                 div包括p包含：插入新元素的初始段落   id=“newElement”；  隐藏
				css  按钮   ：外边距包括5px  ，内外边距：10px  15px   鼠标移动上：手指显示
                      body：  外边距20px
					 #target： 像素边框 、内边距：10px 	上外边距：10px		  
										 -->
			<button id="appendBtn">内部末尾插入元素</button>
			<button id="prependBtn">内部开头插入元素</button>
			<button id="afterBtn">外部后面插入元素</button>
			<button id="beforeBtn">外部前面插入元素</button>
			<button id="removeBtn">删除元素</button>
			<button id="emptyBtn">清空元素</button>
			<button id="replaceBtn">替换元素</button>
			<!-- 目标显示区域 -->
			<div id="target">
				<p>目标元素的初始段落</p>
			</div>
			<!-- 用于插入和替换的区域 -->
			<div id="newElement" style="display: none;">
				<p>插入新元素的初始段落</p>
			</div>
			<script>
				/* 1.点击  内部末尾插入元素  按钮  p 文本后面追加新元素中包含内容操作 */
				$("#appendBtn").click(function(){
					//效果：  点击按钮  追加新元素--自带内容
					//1.1  追加内容是新元素--克隆--html结构全部复制出来，元素包含属性
					 var cpe=$("#newElement").click();
						//clone（）  创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
						//1.2   自带属性和属性值  ：隐藏--改成显示
						cpe.css("display","block");
						//1.3  将复制出来的新元素，追加给当前元素上
					$("#target").append(cpe);
				});
				/* 2.点击   内部末尾插入元素   按钮   p   文本后面追加新元素中包含内容操作 */
				$("#prependBtn").click(function(){
					 var cpe=$("#newElement").click();
					 cpe.css("display","block");
					 $("#target").prepend(cpe);
					 });
			/* 3.点击  外部后面插入元素  按钮  p文本后面追加新元素中包含内容操作 */
						$("#afterBtn").click(function(){
							var cpe=$("#newElement").clone();
							cpe.addClass("boss"); //替换成：addClass函数
							$("#target").after(cpe);
						});
				/* 4.点击   外部前面插入元素   按钮   p   生成 图形  保留背景色  文本不需要，
				                                                                 背景图  300*300     */
			     $("#beforeBtn").click(function(){
					 
																				 					 var cpe=$("#newElement").click();
																				 					 cpe.css({"width":"300px",
						                                                                                          "height":"300px",
									                                                                                "background-color":"#ff0",
																													"border-radius":"5px",
																													"background-image":"url(../img/可爱.gif)",
																													"background-size":"100% 100%",
																													"color":"transparent",
																													"display":"block"
																													
																													});
																				 					 $("#target").before(cpe);
																									 });
				/* 5.点击   删除元素    按钮  页面上所有的元素全部删除【盒子模型删】 */
				$("#removeBtn").click(function(){
					$("#target").remove();
				});
			/* 6.点击   清空元素   按钮     页面上所有元素中内容全部删掉【盒子模型不删】 */	
				 $("#emptyBtn").click(function(){
				 	$("#target").empty();
				 });
				 /* 7.点击    替换元素   按钮   页面上目标元素替换为新元素*/
				 $("#replaceBtn").click(function(){
					 //克隆    新元素 #newElement【父子级】
				 var c=$("#newElement").clone().css("display","block");
					//替换  找到 新元素    替换   目标元素
					$("#target").replaceWith(c);
				 });
			</script>
	</body>
</html>